<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .con {
        width: 1000px;
        height: 600px;
        border: 5px dashed #eee;
        /* 水平居中 */
        margin: 0 auto;
    }

    .header {
        display: flex;
        justify-content: space-between;
    }

    .header div {
        width: 20%;
        text-align: center;
        font-size: 12px;
        color: rgb(140, 62, 62);
        line-height: 30px;
    }

    .music {
        display: flex;
        justify-content: space-between;
    }

    .music div {
        width: 20%;
        text-align: center;
        font-size: 14px;
        line-height: 50px;
    }
</style>

<body>
    <div class="con">
        <div class="header">
            <div>序号</div>
            <div>歌曲</div>
            <div>歌手</div>
            <div>类型</div>
            <div>时长</div>
        </div>
    </div>
</body>
<script>
    //打开powershell的命令，在当前目录，摁住键盘shift键，点击鼠标右键，打开powershell
    //1.npm install http-server -g
    //2.执行命令http-server
    // 3.访问页面在浏览器中点击demo2.html
    let con = document.querySelector('.con');
    fetch("./data.json").then(response => response.json())
        .then((data) => {
            let musicList = data.musicList;
            for (let i = 0; i < musicList.length; i++) {
                let musicObj = musicList[i];
                let musicCon = document.createElement("div");
                musicCon.className = "music";
                for (var key in musicObj) {
                    let childCon = document.createElement("div");
                    childCon.innerHTML = musicObj[key];
                    musicCon.appendChild(childCon);

                }
                con.appendChild(musicCon);
                console.log(musicCon);

            }

            console.log(data);
        })

</script>

</html>